<template>
  <div class="search-popup">
    <md-popup v-model="isPopupShow" position="right">
      <div class="content">
        <div class="content-hd">搜索</div>
        <md-field>
          <md-input-item title="客户名称" placeholder="请输入" v-model="form.customerName"/>
          <md-input-item title="客户编号" placeholder="请输入" v-model="form.customerCode" type="digit"/>
          <md-input-item
            title="产品实例" placeholder="请输入"
            v-model="form.productNo"/>
          <md-input-item title="客户IP地址" placeholder="请输入"
                         v-show="searchType === 'net'"
                         v-model="form.customerIp"/>
          <md-input-item title="ONU_MAC地址" placeholder="请输入"
                         v-show="searchType === 'net'"
                         v-model="form.mac"/>
          <md-input-item title="电路名称" placeholder="请输入"
                         v-show="searchType === 'trans'"
                         v-model="form.circuitName"/>
          <md-input-item title="码号段表" placeholder="请输入"
                         v-show="searchType === 'speech'"
                         v-model="form.code"/>
          <md-input-item title="apn名称" placeholder="请输入"
                         v-show="searchType === 'apn'"
                         v-model="form.apnName"/>
          <md-input-item title="apnid" placeholder="请输入"
                         v-show="searchType === 'apn'"
                         v-model="form.apnId"/>
          <md-input-item title="服务代码" placeholder="请输入"
                         v-show="searchType === 'sms'"
                         v-model="form.serviceCode"/>
          <md-input-item title="企业代码" placeholder="请输入"
                         v-show="searchType === 'sms'"
                         v-model="form.enterpriseCode"/>
        </md-field>
        <div class="content-ft">
          <md-button @click="reset">重置</md-button>
          <md-button type="primary" @click="search">搜索</md-button>
        </div>
      </div>
    </md-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import {
  Field,
  InputItem,
  Button,
  Popup,
  PopupTitleBar
} from 'mand-mobile';

export default {
  name: 'dx-search-customer',
  components: {
    [Field.name]: Field,
    [InputItem.name]: InputItem,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar
  },
  props: {
    searchType: {
      type: String,
      default: ''
    },
    // 格式为查询参数，例如 customerCode=1212&customerName=测试
    defaultValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isPopupShow: false,
      form: {}
    };
  },
  watch: {
    searchType() {
      this.reset();
      console.log(1);
    }
  },
  created() {
    this.reset();
    console.log(2);
  },
  methods: {
    showPopup() {
      this.isPopupShow = true;
    },
    reset() {
      this.form = {
        customerName: '', /*  all              客户编号 */
        customerCode: '', /*  all              客户名称 */
        productNo: '', /*     net|trans|speech 产品实例 */
        customerIp: '', /*    net              客户IP地址 */
        mac: '', /*           net              ONU_MAC地址 */
        circuitName: '', /*   trans            电路名称 */
        code: '', /*          speech           码号段表 */
        apnName: '', /*       apn              apn名称 */
        apnId: '', /*         apn              apnid */
        serviceCode: '', /*   sms              服务代码 */
        enterpriseCode: '' /* sms              企业代码 */
      };
      if (this.defaultValue) {
        const queryList = this.defaultValue.split('&');
        queryList.forEach(query => {
          const strArr = query.split('=');
          this.form[strArr[0]] = strArr[1];
        });
      }
    },
    search() {
      this.isPopupShow = false;
      this.$emit('on-search', this.form);
    }
  }
};
</script>

<style lang="stylus" scoped>
  .search-popup
    /deep/ .md-slide-left
      width : 80%
    ::v-deep.md-field-item.is-solid
      .md-field-item-title
        width : 220px
    .content
      position : relative
      height : 100%
      background : #fff
      .content-hd
        height : 88px
        line-height : 88px
        font-size : 32px
        text-align : center
      .content-ft
        position : absolute
        bottom : 0
        padding : 20px
        display : flex
        width : 100%
        .md-button
          margin-right : 20px
          &:last-of-type
            margin-right : 0
    .md-field
      padding : 0 20px
</style>
